import { h, ref, reactive } from 'vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import TableTags from '@/components/DataTable/tools/Tags.vue'
import TableImage from '@/components/DataTable/tools/Image.vue'
import { TASK_QUESTION_STATUS } from '@/utils/dictionary'

/* 注册table */
const tableRef = ref()
const searchParams = ref()

function handleSearch(params) {
  searchParams.value = { ...params }
  tableRef.value.reFetch({ searchParams })
}

/**
 * @description: 确认
 */
async function handleData(row, type) {
  data.rowData = row
  data.modalType = type
  data.modalShow = true
}

// 图片位置
function imgAddress(row) {
  data.showDraw = true
  data.rowData = row
}

const data = reactive({
  tableRef,
  searchParams,
  rowData: {},
  modalType: 'create',
  modalShow: false,
  showDraw: false,
  detail: {},
  handleSearch,
  columns: [
    {
      type: 'selection',
      disabled(row) {
        return row.status > 15
      }
    },
    {
      title: '序号',
      key: 'key',
      render: (_, index) => {
        return `${index + 1}`
      },
      align: 'center',
      width: 100
    },
    {
      title: '问题类型',
      key: 'questionName',
      align: 'center'
    },
    {
      title: '问题图片',
      key: 'imageUrl',
      align: 'center',
      render(row) {
        if (row.fileImage) {
          return h(TableImage, {
            images: {
              width: 119,
              height: 51,
              // src: row.imageUrl.split(',')[0],
              src: row.fileImage,
              // previewDisabled: true, // 禁止点击预览
              style: {
                cursor: 'pointer'
              }
            }
          })
        } else {
          return h(TableAction, {
            actions: [
              {
                label: ''
              }
            ],
            align: 'center'
          })
        }
      }
    },
    {
      title: '位置',
      align: 'center',
      width: 80,
      fixed: 'right',
      render(row) {
        return h(TableAction, {
          actions: [
            {
              label: '图片位置',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: imgAddress.bind(null, row)
              },
              auth: ''
            }
          ],
          align: 'center'
        })
      }
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      render(row) {
        return h(TableTags, {
          data: row.status,
          filters: TASK_QUESTION_STATUS
        })
      }
    },
    {
      title: '操作',
      align: 'center',
      key: 'actionBtn',
      fixed: 'right',
      disabled: false,
      render(row) {
        return h(TableAction, {
          actions: [
            {
              label: '忽略',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: handleData.bind(null, row, 'ignore')
              },
              show: [5, 15].includes(row.status),
              auth: ''
            },
            {
              label: '确认',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: handleData.bind(null, row, 'confirm')
              },
              show: [5, 10].includes(row.status),
              auth: ''
            }
          ],
          align: 'center'
        })
      }
    }
  ]
})

export default data
